<template>
  <div id="login">
    <header class="mui-bar mui-bar-nav">
        <span><img src="login/1.png" @click="back"></span><h1 class="mui-title">登录</h1>
    </header>
    <section>
        <div id="logo">
            <img src="login/3.png" >
            <p>欢迎回来</p>
        </div>
        <div id="email">
            <input type="text" placeholder="请输入用户名" v-model="inputvala"/>
            
            <div id="code">
                <input type="" name="" id="" value="" placeholder="请输入密码" v-model="inputvalb"/>
                
            </div>
        </div>
        <div id="read">
            <input type="checkbox" name="" id="check" checked v-model="inputvalc"/>&nbsp;&nbsp;已阅读并同意<span id="">《用户协议》《支付协议》《隐私权政策》</span>
        </div>
        <button ref="btn" id="sure" @click="request()" :disabled="bool"> 
            
            确定
        </button>
    </section>
</div>
</template>

<script>
export default {
    methods:{
        back(){
            this.$router.go(-1)
        },

        request(){
            let data = {'username': this.inputvala,'password':this.inputvalb}
            this.$store.dispatch("postlink",{url:"http://81.68.226.70:8050/user/login/","phone":data}).then(()=>{
                console.log("ok")
            }).catch(()=>{   
                console.log("err")
            })
        // 去填写信息
            // this.$router.push("/writedata")
            // console.log(1)
        },
        
    },
    mounted(){
        
    },

    data(){
        return{
            login:false,
            // 确定按钮
            bool:true,
            // 获取验证码
            boola:true,
            inputvala:"",
            inputvalb:"",
            inputvalc:"",
        }
    },
    created(){
        this.login = this.$store.state.elsem.login
    },
    watch:{
        login(newval){
            if(newval == true){
                this.$router.replace("/home")
            }
        },
        inputvala(newval){
            let a=/^.{2,15}$/;
            let b=/^.{6,18}$/;
            
           
            if(a.test(newval)&&b.test(this.inputvalb)&&this.inputvalc==true){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
        inputvalb(newval){
             let a=/^.{2,15}$/;
            let b=/^.{6,18}$/;
            if(b.test(newval)&&a.test(this.inputvala)&&this.inputvalc==true){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
        inputvalc(newval){
             let a=/^.{2,15}$/;
            let b=/^.{6,18}$/;
            if(b.test(this.inputvalb)&&a.test(this.inputvala)&&newval==true){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        }
    }
}
</script>
<style>
html,body{
    height: 100%;    
    background-color: #f5f5f5;
}
</style>
<style scoped>
    
    #login{
        width: 3.75rem;
        background-color: #f5f5f5;
    }
    header{
    display: flex;
    height: 0.55rem;
    font-size: 0.16rem;
    width: 100%;
    background-color: #f5f5f5;
    padding: 0.12rem 0;
    }
    header img{
        height: 0.34rem;
        position: absolute;
    }
    header h1{
        font-size: 0.16rem;
        line-height: 0.34rem;
        margin: auto;
        font-weight: 700;
        /* height: 0.34rem; */
        display: inline;
    }
    #logo{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #logo img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        margin: auto;
        margin-top: 0.4rem;
    }
    #logo p{
        font-size: 0.12rem;
        text-align: center;
        margin: 0.1rem 0;
        font-size: 0.12rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    #email{
        width: 3.59rem;
        height: 1.16rem;
        margin: auto;
        border-radius: 0.03rem;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #email>input{
        width: 3.2rem;
        height: 0.6rem;
        margin: auto;
        font-size: 0.12rem;
        outline: none;
        border: none;
        text-indent: 0.05rem;
    }
    #code{
        width: 3.2rem;
        height: 0.6rem;
        margin: auto;
        border-top: 1px solid #b3b3b3;
        font-size: 0.12rem;
        color: #b3b3b3;
        line-height: 0.6rem;
        display: flex;
    }
    #code input{
        width: 3.15rem;
        height: 0.6rem;
        margin: auto;
        font-size: 0.12rem;
        outline: none;
        border: none;
        text-indent: 0.05rem;
    }
    input::-webkit-input-placeholder{
        color: #b3b3b3;
    }
    #read{
        width: 3.59rem;
        font-size: 0.12rem;
        margin: auto;
        line-height: 0.73rem;
        text-indent: 0.05rem;
    }
    #read>input{
        width: 0.15rem;
        height: 0.15rem;
        position: relative;
        top: 0.03rem;
        border: #b3b3b3;
        outline:#b3b3b3 ;
    }
    #read span{
        color: #575499;
    }
    #sure{
        width: 3.59rem;
        height: 0.41rem;
        margin: auto;
        background-color: #c8cfeb;
        font-size: 0.16rem;
        color: white;
        line-height: 0.41rem;
        border-radius: 0.3rem;
        font-weight: 500;
        border: none;
        outline: none;
        margin: auto;
        display: block;
    }
    #getcode{
        width: 0.8rem;
        border: none;
        background-color: #ebebeb;
    }
</style>